<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人资料--layui后台管理模板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../js/layui/css/layui.css"
	media="all" />
<script src="../../js/layui/layui.js"></script>
<link rel="stylesheet" href="../../css/user.css" media="all" />
</head>
<body class="childrenBody">
	<form class="layui-form" id="Form" lay-filter="form">
		<input type="hidden" name="id" id="id" value="" class="layui-input">
		<div class="user_left">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" value="" style="width: 220px; margin-top: 30px"
						name="name" id="name" class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					<input type="text" value="" style="width: 220px; margin-top: 50px"
						name="role" id="role" class="layui-input layui-disabled">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-block">
					<input type="tel" value="" style="width: 220px; margin-top: 50px"
						name="phone" placeholder="请输入手机号码" lay-verify="required|phone"
						class="layui-input">
				</div>
			</div>

		</div>
		<div class="user_right">
			<div class="layui-form-item">
				<label class="layui-form-label"
					style="color: gray; font-size: 15px;" style="padding-top: 50px">头像
				</label>

				<div class="layui-input-inline">

					<img id="imgFace"
						style="width: 200px; height: 200px; margin-top: 30px" /> <br />
					<span>点击更换</span> <input type="hidden" name="toxiang" id="picName"
						value="" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item"
			style="margin-left: 5%; margin-top: 50px;">
			<div class="layui-input-block" style="padding-top: 50px">
				<button class="layui-btn" lay-submit="" lay-filter="addDesigner">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script type="text/javascript">
		layui
				.use(
						[ 'upload', 'layer', 'form' ],
						function() {
							var upload = layui.upload, $ = layui.$, form = layui.form, layer = layui.layer;

							$(function() {
								$.post('../../../AdminServlet?reqName=getUser',
										function(res) {
											var data = res.data[0];
											form.val("form", {
												"toxiang" : data.toxiang,
												"name" : data.uName,
												"role" : data.uRole,
												"phone" : data.uPhone,
												"id" : data.uId
											});
											$("#imgFace").attr(
													"src",
													"../../../images/"
															+ data.toxiang);
										}, "json");

							});
							$("#name")
									.blur(
											function(e) {
												if ($("#name").val().length <= 6
														&& $("#name").val().length >= 2) {
													layer.msg("用户名格式正确", {
														icon : 6
													});
												} else {
													layer.msg("用户名为2~6位", {
														icon : 5
													});
												}
											})
							var uploadInst = upload.render({
								elem : '#imgFace' //绑定元素
								,
								url : '../../../AdminServlet?reqName=upload',
								acceptMime : 'image/*',
								done : function(res) {
									if (res) {
										//把返回的图片名，放到img标记的src里面
										$("#imgFace")
												.attr(
														"src",
														"../../../images/"
																+ res.remark);
										//把返回的图片名，保存在隐藏域里面
										$("#picName").val(res.remark);
										layer.msg('新图片上传成功', {
											icon : 6,
											time : 1500
										});
									}
								},
								error : function() {
									layer.msg("图片上传失败");
								}
							});

							form
									.on(
											'submit(addDesigner)',
											function(data) {
												$
														.post(
																'../../../AdminServlet?reqName=updateUser',
																$("#Form")
																		.serialize(),
																function(res) {
																	if (res) {
																		var index = top.layer
																				.msg(
																						'数据提交中，请稍候',
																						{
																							icon : 16,
																							time : false,
																							shade : 0.8
																						});
																		setTimeout(
																				function() {
																					top.layer
																							.close(index);
																					top.layer
																							.msg("信息编辑成功！");
																					
																				},
																				1000);
																	} else {
																		var index = top.layer
																				.msg(
																						'数据提交中，请稍候',
																						{
																							icon : 16,
																							time : false,
																							shade : 0.8
																						});
																		setTimeout(
																				function() {
																					top.layer
																							.close(index);
																					top.layer
																							.msg("编辑失败！");

																				},
																				1000);
																	}
																}, "text")
												return false;
											})
						});
	</script>

</body>
</html>